
// 获取dom  元素
const tbody = document.querySelector('tbody');

const openModal = document.querySelector('#openModal');//模态框

const form = document.querySelector('form');//form 表单
const province = document.querySelector('select[name=province]');//省
const city = document.querySelector('select[name=city]');//市
const area = document.querySelector('select[name=area]');//县

const modalText = document.querySelector('.modal-title');//模态框的文本

// 待 操作的id
let id;

// 封装渲染
async function render() {
    const result = await axios({
        url: "/students",

    })

    const html = result.data.data.map((item) => {
        return `
        <tr>
   <td>${item.name}</td>
   <td>${item.age}</td>
   <td>${item.gender === 0 ? "男" : "女"}</td>
   <td>第${item.group}组</td>
   <td>${item.hope_salary}</td>
   <td>${item.salary}</td>
   <td>${item.province + item.city + item.area}</td>
   <td>
     <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
     <a  href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash delete-btn"></i></a>
   </td>
 </tr>
        `
    })

    tbody.innerHTML = html.join('');
}
render()


// 设置模态框   
const myModal = new bootstrap.Modal('#modal', {
    // keyboard: false
})


// 初始化 省
async function Province() {
    /*     const result = await axios({
            url: "/api/province"
        })
    
        // console.log(result);
        const html = result.data.data.reduce((beforeHTML, item) => {
            return beforeHTML + `<option value="${item}">${item}</option>`
        }, "<option value=''>--省--</option>");
    
        province.innerHTML = html */
    Aa("/api/province", {}, '省', province)


}
Province()

// province  的 change 事件
province.addEventListener('change', async function (e) {
    /*   const result = await axios({
          url: "/api/city",
          params: {
              pname: province.value
          },
      })
      // console.log(result);
      const html = result.data.data.reduce((beforeHTML, item) => {
          return beforeHTML + `<option value="${item}">${item}</option>`
      }, "<option value=''>--城市--</option>");
      city.innerHTML = html */

    Aa("/api/city", { pname: province.value }, '城市', city)
})


// city 的change 事件
city.addEventListener('change', async function (e) {
    /*  const result = await axios({
         url: "/api/area",
         params: {
             pname: province.value,
             cname: city.value,
         }
     })
     console.log(result);
 
     const html = result.data.data.reduce((beforeHTML, item) => {
         return beforeHTML + `<option value="${item}">${item}</option>`
     }, "<option value=''>--地区--</option>");
     area.innerHTML = html */

    Aa("/api/area", { pname: province.value, cname: city.value }, '地区', area)

})


// 统一封装 省  城市 地区
async function Aa(url, params, text, target) {

    const result = await axios({
        url,
        params,
    })
    // console.log(result);

    const html = result.data.data.reduce((beforeHTML, item) => {
        return beforeHTML + `<option value="${item}">${item}</option>`
    }, `<option value=''>--${text}--</option>`);
    target.innerHTML = html


}



// 点击显示模态框
openModal.addEventListener('click', function (e) {
    // console.log(123);
    // 显示模态框
    myModal.show()

    modalText.innerText = '添加学员'

})


// form 表单的 submit 事件
form.addEventListener('submit', async function (e) {

    // 取消默认行为
    e.preventDefault()

    // 快速获取表单元素
    const data = serialize(form, { hash: true, empty: true });
    // console.log(data);

    // 转化
    data.age = +data.age;
    data.gender = +data.gender;
    data.salary = +data.salary;
    data.hope_salary = + data.hope_salary
    data.group = + data.group

    // 添加 模块
    if (modalText.innerText === '添加学员') {
        // 非空校验
        for (const key in data) {
            if (!data[key]) {
                TaShow('请填写完整信息！！')
                return;
            }
        }




        const result = await axios({
            url: "/students",
            method: 'post',
            data,
        })
        console.log(result);
        // 友好提示
        TaShow(result.data.message)

        // 重新渲染
        render()

        // 重置模态框
        form.reset()

        // 关闭模态框
        myModal.hide()

        // 编辑 模块
    } else if (modalText.innerText === '修改学员') {

        data.id = id

        const result = await axios({
            url: `/students/${id}`,
            method: "put",
            data,

        })

        console.log(result);
        // 友好提示
        TaShow(result.data.message)

        // 重新渲染
        render()

        // 重置模态框
        form.reset()

        // 关闭模态框
        myModal.hide()






    }



})



// 删除 跟 编辑 功能
tbody.addEventListener('click', async function (e) {
    const target = e.target
    let result;
    if (target.classList.contains('delete-btn')) {

        if (confirm('你确认删除吗？？')) {
            // console.log('删除');

            const id = target.dataset.id
            result = await axios({

                url: `/students/${id}`,
                method: 'delete',
                params: {
                    id
                }
            })
            render()
            TaShow('删除成功')
        }
    } else if (target.classList.contains('bi-pen')) {
        // console.log('编辑');
        // 显示模态框
        myModal.show()
        // 修改文本
        modalText.innerText = '修改学员'

        // id
        id = target.dataset.id

        // console.log(id);
        result = await axios({
            url: `students/${id}`,
        })
        // console.log(result);

        const obj = result.data.data
        console.log(obj);

        // 先初始化 城市  跟 地区
        await Aa("/api/city", { pname: obj.province }, '城市', city)
        await Aa("/api/area", { pname: obj.province, cname: obj.city }, '地区', area)

        // 循环遍历
        for (const key in obj) {
            // 先拿到 所有dom 元素
            const listDom = document.querySelector(`[name=${key}]`);

            // 把 性别的 拿出来 另外做 
            if (listDom && key !== 'gender') {
                listDom.value = obj[key]
            }
        }
        // 设置性别
        document.querySelector(`[name=gender][value="${obj.gender}"]`).checked = true;



    }
})

